<template>
  <view class="tab-wrapper">
    <view
    :class="item.value === currentTab ? 'tab checked' : 'tab'" 
     v-for="item in tabs" 
     :key="item.value"
      @click="handleChange(item, index)" 
    >
      <text class="txt">{{ item.label }} {{ showNum && item.num > 0 ? `(${item.num})` : ''}}</text>
    </view>
  </view>
</template>
<script setup>
  import { ref } from 'vue';

  const props = defineProps({
    tabs: {
      type: Array,
      default: () => []
    },
    activeKey: {
      type: [String, Number],
      default: ''
    },
    showNum: {
      type: Boolean,
      default: false
    }
  });
  const $emit = defineEmits(['onChange']);
  const currentTab = ref(props.activeKey);

  const handleChange = (item, index) => {
    currentTab.value = item.value;
    $emit('onChange', item, index);
  }
</script>
<style lang="scss" scoped>
  .tab-wrapper {
    height: 82upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    .tab {
      height: 100%;
      flex: 1;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .txt {
        color: #A9A9A9;
        text-align: center;
        font-size: 26upx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
      &.checked {
        .txt {
          color: #30302F;
          text-align: center;
          font-size: 32upx;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          position: relative;
          z-index: 1;
        }
        &::after {
          position: absolute;
          content: " ";
          z-index: 0;
          left: 50%;
          bottom: 18upx;
          margin-left: -38upx;
          width: 76upx;
          height: 12upx;
          flex-shrink: 0;
          border-radius: 6upx;
          background: #F4C13A;
        }
      }
    }
  }
</style>